<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    
 <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>产品编辑页面</title>
<script type="text/javascript"
	src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
	<a href="test?action=toDemo">回首页</a></br>
	<input type="hidden" id="proId" value="${requestScope.proId }"/>
	一级分类
	<select id="cate1" onchange="selectChange('cate2',this.value)">
		<option>请选择...</option>
		<c:forEach items="${requestScope.cates }" var="cate">
			<c:if test="${cate.type==1 }">
				<option id="${cate.id }" <c:if test="${cate.id==requestScope.selectCate.cate1 }">selected</c:if> >${cate.name }</option>				
			</c:if>
		</c:forEach>
	</select> 
	二级分类
	<select id="cate2" onchange="selectChange('cate3',this.value)">
		<option>请选择...</option>
		<c:forEach items="${requestScope.cates }" var="cate">
			<c:if test="${cate.type==2 }">
				<option id="${cate.id }" <c:if test="${cate.id==requestScope.selectCate.cate2 }">selected</c:if> >${cate.name }</option>				
			</c:if>
		</c:forEach>
	</select> 
	三级分类
	<select id="cate3">
		<option>请选择...</option>
		<c:forEach items="${requestScope.cates }" var="cate">
			<c:if test="${cate.type==3 }">
				<option id="${cate.id }" <c:if test="${cate.id==requestScope.selectCate.cate3 }">selected</c:if> >${cate.name }</option>				
			</c:if>
		</c:forEach>
	</select>
</body>
<script type="text/javascript">
	
	$(document).ready(function(){
		//proId=0 新增产品，ajax加载分类1下拉框的数据
		//proId!=0修改产品，显示产品对应各分类option
		if($("#proId").val()=="0"){
			selectChange("cate1",0);
		}
	});
	
	//下拉框值改变事件
	function selectChange(selectId, parentId){
		var url="test";
		$.post(url, {"action":"categoryByParentId","id":parentId}, function(data) {
			if (data.code == 0) {
				$("#"+selectId).empty();//首先清空select现在有的内容
                $("#"+selectId).append("<option selected='selected'  value=0>请选择..</option>");
                for (var i = 0; i < data.data.length; i++) {
                  var item = data.data[i];
                  $("#"+selectId).append("<option  value=" + item.id + ">" + item.name + "</option>");
                }
			} else {
				alert(data.msg);
			}
		}, 'json'); 
	}
	
</script>
</html>